<!-- components/charts/GaugeChart.vue -->
<template>
  <BaseChart :options="chartOptions" :height="height" :show-empty="showEmpty" @chart-ready="onChartReady"
    @refresh="$emit('refresh')" />
</template>

<script setup>
import { computed } from 'vue'
import BaseChart from './BaseChart.vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  height: {
    type: String,
    default: '400px'
  },
  config: {
    type: Object,
    default: () => ({})
  },
  showEmpty: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['chartReady', 'refresh'])

// 获取仪表盘配置
const gaugeOption = computed(() => props.config.option || {})

// 检查是否有有效数据
const hasValidData = computed(() => {
  const valueField = gaugeOption.value.valueField

  if (!valueField) {
    return false
  }

  const data = props.data || {}
  const value = data[valueField]

  return value !== null && value !== undefined && value !== ''
})

const chartOptions = computed(() => {
  const data = props.data || {}
  const valueField = gaugeOption.value.valueField

  if (!hasValidData.value) {
    return {
      title: {
        text: props.config.title || '仪表盘',
        left: 'center'
      },
      series: []
    }
  }

  const value = data[valueField]
  let numericValue = 0

  // 提取数值
  if (typeof value === 'number') {
    numericValue = value
  } else if (Array.isArray(value) && value.length > 0) {
    numericValue = value[0] || 0
  } else if (typeof value === 'string') {
    numericValue = parseFloat(value) || 0
  } else {
    numericValue = parseFloat(value) || 0
  }

  // 格式化数字
  const formatNumber = (val) => {
    if (gaugeOption.value.decimalPlaces > 0) {
      return val.toFixed(gaugeOption.value.decimalPlaces)
    }
    return val.toString()
  }

  return {
    title: {
      text: props.config.title || '仪表盘',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },

    tooltip: {
      formatter: `{a} <br/>{b} : {c}${gaugeOption.value.unit || ''}`
    },

    series: [
      {
        name: props.config.title || '指标',
        type: 'gauge',
        min: gaugeOption.value.min,
        max: gaugeOption.value.max,
        progress: {
          show: true,
          width: 18
        },
        axisLine: {
          lineStyle: {
            width: 18,
            color: [
              [0.3, gaugeOption.value.colors?.[0] || '#91cc75'],
              [0.7, gaugeOption.value.colors?.[1] || '#fac858'],
              [1, gaugeOption.value.colors?.[2] || '#ee6666']
            ]
          }
        },
        axisTick: {
          distance: -18,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2
          }
        },
        axisLabel: {
          distance: -40,
          color: '#999',
          fontSize: gaugeOption.value.fontSize
        },
        anchor: {
          show: true,
          size: 20,
          showAbove: true,
          itemStyle: {
            borderWidth: 8
          }
        },
        pointer: {
          icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
          width: 8,
          length: '70%',
          offsetCenter: [0, '8%']
        },
        detail: {
          valueAnimation: true,
          fontSize: gaugeOption.value.fontSize + 10,
          offsetCenter: [0, '40%'],
          formatter: `{value}${gaugeOption.value.unit || ''}`
        },
        data: [
          {
            value: numericValue,
            name: props.config.title || '指标'
          }
        ]
      }
    ]
  }
})

const onChartReady = (chart) => {
  emit('chartReady', chart)
}

// 暴露字段给父组件
const allFields = computed(() => Object.keys(props.data || {}))

defineExpose({
  allFields
})
</script>